<template>
  <div>
    <el-form
      class="filter-container"
      ref="searchData"
      :model="searchData"
      label-width="85px"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="合约id">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.instrumentid"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="mini"
            style="margin-top:5px"
            @click="search"
          >
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      highlight-current-row
      @current-change="handleSelectionChange"
    >
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column
        prop="instrument"
        label="合约id"
        sortable
      ></el-table-column>
      <el-table-column
        prop="instrumentName"
        label="合约名称"
        sortable
      ></el-table-column>
      <el-table-column
        prop="volumeMultiple"
        label="合约乘数"
        sortable
      ></el-table-column>
      <!-- <el-table-column prop="priceUnit" label="单位" sortable></el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="closeBtn"
        style="margin-left:92%"
        size="mini"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import { instrument } from "@/api/url_info.js";
export default {
  //合约弹框
  name: "instrument",
  props: ["closeValue", "row"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      searchData: {
        instrumentid: "",
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //查询
    search() {
      this.searchData.page = 1;
      this.getData();
    },
    async getData() {
      let that = this;
      console.log(that.row);
      let params = {
        productID: that.row.productID,
        instrumentid: that.searchData.instrumentid,
        type: that.row.type,
        page: that.searchData.page //当前页
      };
      await instrument(params)
        .then(res => {
          let tableData = [];
          let data = res.result.results;
          that.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            tableData[i] = {
              instrument: data[i]["instrument"],
              instrumentName: data[i]["instrumentName"],
              volumeMultiple: data[i]["volumeMultiple"],
              priceUnit: data[i]["priceUnit"]
            };
          }
          that.tableData = tableData;
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.getData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.getData();
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    closeBtn() {
      if (this.closeValue == "spot") {
        this.$emit("instrument_S", [this.multipleSelection, "spot"]);
      }
    }
  }
};
</script>
